<template>
  <NuxtLayout name="admin" menuActive="/admin/message">
    <div class="card">
      <el-page-header @back="useRouter().go(-1)"></el-page-header>
      <div style="height: 18px;"></div>
      <el-table class="my_table" :data="tableData" show-overflow-tooltip>
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.replys" border show-overflow-tooltip>
              <el-table-column label="回复类型">
                <template #default="scope">
                  <el-tag type="danger" v-show="scope.row.type == 0">机构回复</el-tag>
                  <el-tag type="primary" v-show="scope.row.type == 1">用户回复</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="replyName" label="回复者名称" />
              <el-table-column prop="replyContent" label="回复内容" />
              <el-table-column prop="replyTime" label="	回复时间" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="commentName" label="留言者名称" />
        <el-table-column prop="commentPhoneNo" label="留言者手机号" />
        <el-table-column prop="commentContent" label="留言内容" />
        <el-table-column prop="commentTime" label="留言时间" />
        <el-table-column prop="commentIp" label="留言IP" />
        <el-table-column prop="course.title" label="课程标题" />
        <el-table-column prop="course.author" label="课程讲师" />
        <el-table-column prop="courseVideo.title" label="课程视频标题" />
        <el-table-column label="操作" fixed="right" width="75">
          <template #default="props">
            <el-button type="primary" size="small" @click="replyFn(props.row)">回复</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="card_pagin">
        <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="listForm.pageSize"
          @change="pageChangeFn" />
      </div>
    </div>
    <MyForm :visible="formVisible" :forms="forms" @pick="formPickFn" />
  </NuxtLayout>
</template>

<script setup>
import { courseComment, reply } from '~/server/api'
import MyForm from './form'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_留言管理",
  keywords: "技考邦,留言管理",
  description: "技考邦，留言管理。",
  ogTitle: "技考邦_留言管理",
  ogDescription: "技考邦，留言管理。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
// 列表
const listForm = ref({
  pageNum: 1,
  pageSize: 20,
  courseId: null,
  courseVideoId: null
})
const tableData = ref([])
const total = ref(0)
const getList = async () => {
  let { data: listRes } = await useAsyncData('courseComment', () => useServerRequest(courseComment, {
    method: 'post',
    body: JSON.stringify(listForm.value)
  }))
  if (listRes.value && listRes.value.errno === 0) {
    tableData.value = listRes.value.result.list;
    total.value = listRes.value.result.total;
  }
}
getList()
// 分页
const pageChangeFn = (val) => {
  listForm.value.pageNum = val;
  getList()
}
// 回复
const formVisible = ref(false)
const forms = ref({})
const replyFn = (val) => {
  forms.value.id = val.id;
  forms.value.replyContent = '';
  formVisible.value = true;
}
// 取消 确认
const formPickFn = async (e) => {
  if (e.form) {
    if (e.form.replyContent == '') {
      ElMessage({
        message: '请输入内容',
        type: 'warning',
        appendTo: document.querySelector('.el-dialog') || document.body
      })
      return false
    }
    const loading = ElLoading.service({ text: '请求中...', target: document.querySelector('.el-dialog') })
    let classRes = await useServerRequest(reply, {
      method: 'post',
      body: JSON.stringify(e.form)
    })
    if (classRes.errno === 0) {
      ElMessage({
        message: '回复成功',
        type: 'success'
      })
      getList()
      formVisible.value = e.visible;
    }
    loading.close()
    return false;
  }
  formVisible.value = e.visible;
}
</script>

<style lang="less" scoped>
.card {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #EEEEEE;
  padding: 35px 25px;

  &_pagin {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>